﻿@{
    @using Microsoft.AspNetCore.Http;
    Layout = null;
    ViewData["Title"] = "HomePage";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<link rel="stylesheet" type="text/css" href="~/css/icon/iconfont.css" />

<div id="elDiv">
    <el-container style="height:1200px" onload="parent.document.all.iframe.style.height=document.body.scrollHeight;" topmargin="0" leftmargin="0" rightmargin="0" bottomMargin="0">
        @*左侧菜单栏【每个角色所拥有的权限】*@
        <el-container>
            <el-aside width="210px">
                @*这里需要控制一下左边距*@
                @*<el-radio-group v-model="isCollapse" class="elrg" style="margin-left:-80px">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>*@
                <el-menu class="el-menu-vertical-demo elmu" v-on:open="handleOpen" v-on:close="handleClose" :unique-opened="true" :collapse="isCollapse">
                    <el-menu-item>
                        <img v-if="iconImg" src="/images/iconImg.jpg" width="36" height="36" style="margin-top:10px;" />
                        <template slot="title">
                            <!-- 公司logo  -->
                            @*<span slot="title" style="font-weight: bolder;color:chocolate;">人力资源管理系统</span>*@
                            <el-avatar slot="title" style="width: 100%;"
                                       shape="square" size="medium"
                                       src="/images/iconImg.png" style="width:100%">
                            </el-avatar>
                        </template>
                    </el-menu-item>
                    @*父一级*@
                    <el-submenu v-for="item in menus" :index="item.mid" :key="item.mid" v-if="item.children && item.children.length > 0">
                        <template slot="title">
                            <i :class="item.iconlog"></i>
                            <span slot="title" style="font-weight:bolder">{{ item.mtext }}</span>
                        </template>
                        @*有子集菜单的清空下渲染第二层*@
                        <el-submenu :index="item2.mid" v-for="item2 in item.children" :key="item2.mid" v-if="item2.children && item2.children.length > 0">
                            <template slot="title">
                                <i class="el-icon-s-help"></i>
                                <span slot="title" style="color:#6d6d6d;font-weight:bold">{{ item2.mtext }}</span>
                            </template>
                            @*第三层的最子集层*@
                            <el-menu-item :index="item3.mid" v-for="item3 in item2.children" :key="item3.mid">
                                <template slot="title">
                                    <!-- 图标 -->
                                    <i class="el-icon-setting"></i>
                                    <span v-on:click="partFill(item3.murl)">{{item3.mtext}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                        @*非展开第二层*@
                        <el-menu-item :index="item2.mid" v-else>
                            <template slot="title">
                                <!-- 图标 -->
                                <i class="el-icon-setting"></i>
                                <span v-on:click="partFill(item2.murl)">{{ item2.mtext }}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                    @*非展开第一层*@
                    <!-- 如果没有子集这是最底层级菜单 -->
                    <el-menu-item :key="item.mid"
                                  :index="item.murl" v-else>
                        <template slot="title">
                            <!-- 图标 -->
                            <i class="el-icon-setting"></i>
                            <!-- 文本 -->
                            <span v-on:click="partFill(item1.murl)">{{ item1.mtext }}</span>
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            @*右侧*@
            <el-container>
                <el-header height="25px">
                    @*折叠收起按钮图标*@
                    <i :class="headericon" style="font-size: 25px" v-on:click="headericons()"></i>
                    <div style="float:right">
                        <el-dropdown v-on:command="command">
                            <span class="el-dropdown-link">
                                欢迎：@Context.Session.GetString("uname")
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="1">修改密码</el-dropdown-item>
                                <el-dropdown-item command="2">基本信息</el-dropdown-item>
                                <el-dropdown-item divided command="3" v-on:click.native="LogOff">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                @*右侧主体内容*@
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-row>
                            <el-col :span="22">
                                @*<el-breadcrumb-item :to="{ path: '/main' }">
                                首页
                                </el-breadcrumb-item>*@
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                    @*<el-breadcrumb-item v-for="(level,index) in menus" :key="mid" :to="level.murl">
                                    {{level.mtext}}
                                    </el-breadcrumb-item>*@
                                </el-breadcrumb>
                            </el-col>
                        </el-row>
                    </el-breadcrumb>
                    @*引入局部刷新页面*@
                    <iframe :src="src" name="mainFrame" id="mainFrame" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
                </el-main>
                <el-footer height="30px">Copyright © 2020-2023 AdminLTE.io. All rights reserved.人力资源管理系统.</el-footer>
            </el-container>
        </el-container>
    </el-container>

</div>

<script type="text/javascript">
    var vue = new Vue({
        //引入ElementUI
        el: "#elDiv",
        data: {
            iconImg: true,
            //展开收起菜单图标
            headericon: 'el-icon-s-fold',
            iconLog: {
                //一级菜单图标
                1: "icon-tiaoshi",
                17: "icon-gongnengdingyi",
                26: "icon-ceshishenqing",
                31: "icon-shebeiguanli",
                35: "icon-yingyongguanli",
                39: "icon-gongnengdingyi1",
                51: "icon-zhanghaoquanxianguanli",
            },
            isCollapse: true,//菜单栏收起展开
            src: '',//主体路径
            menus: [],//菜单数据源的集合
        },
        methods: {
            //折叠展开的方法
            headericons() {
                this.isCollapse == false ? this.isCollapse = true : this.isCollapse = false;
                this.iconImg == false ? this.iconImg = true : this.iconImg = false;
                this.headericon == 'el-icon-s-fold' ? this.headericon = 'el-icon-s-unfold' : this.headericon = 'el-icon-s-fold';
            },
            command(index) {
                switch (index) {
                    case '1':
                        this.toClick('修改密码', 'updateadmin')
                        break;
                    case '2':
                        break;
                    case '3':
                        break
                }
            },
            //局部页面内联路径嵌入的方法
            partFill: function(src) {
                //路径赋值
                this.src = src;
            },
            //判断局部刷新的iframe高度的方法
            reinitIframe: function() {
                var iframe = document.getElementById("mainFrame");
                try {
                    //bHeight 和 dHeight 如果相等，用其一等于iframe.height 即可
                    // var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    // var height = Math.max(bHeight, dHeight);
                    //console.log(dHeight);
                    iframe.height = dHeight;
                } catch (ex) { }
            },
            //动态渲染菜单栏数据
            findMenus() {
                //拿到用户登录成功时存入的角色ID
                var rid = sessionStorage.getItem('rid');
                //console.info("rid:", rid);
                axios.get("/Home/HomeMenusFill?rid=" + rid).then((res) => {
                    console.info("该用户角色的所有菜单:", res.data);
                    this.menus = res.data;
                })
            },
            //退出登录
            LogOff() {
                //清除所有Session中的缓存
                sessionStorage.clear();
                //返回到登录
                window.location.href = "/Home/Login";
                //window.location.reloed("/Home/Login");
            },
            //定义一个时间戳,时间控制每隔200毫秒检查当前页面高度以及滚动高度，测试多遍，cpu占用极少，不明显影响程序运行速度
            created() {
                setInterval(() => {
                    this.reinitIframe();
                }, 200);
            },
            handleOpen(key, keyPath) {
                //console.log("开启菜单栏:", key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log("关闭菜单栏：", key, keyPath);
            },
            isHome(route) {
                return route.name === "home";
            },
        },
        mounted: function() {
            //this.created();
            this.findMenus();
        },
    });


</script>
<style scoped>

    .elrg {
        margin-left: -62px;
        margin-top: 0px;
    }

    .elmu {
        margin-top: 0px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 800px;
    }

    .homecontainer {
        height: 1600px;
        width: 100%;
    }

    .head {
        display: flex;
        flex-direction: row;
    }


    .el-heade {
        background-color: white;
        color: #333;
    }

    .el-footer {
        background-color: white;
        color: #333;
        text-align: center;
    }

    .el-aside {
        background-color: white;
        color: #333;
        /*text-align: center;*/
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 210px;
        min-height: 400px;
    }


    /*- scrollbar -*/
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /*滚动条样式修改*/
    /*::-webkit-scrollbar-thumb {
        background-color: #999;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

        ::-webkit-scrollbar-thumb:vertical:hover {
            background-color: #666;
        }

        ::-webkit-scrollbar-thumb:vertical:active {
            background-color: #333;
        }

    ::-webkit-scrollbar-button {
        display: none;
    }

    ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }*/
</style>